<template>
	<view>
		<view class="notes">
			<u-cell title="设置备注和标签" value="郭春香" :isLink="true" arrow-direction="right"></u-cell>
			<u-cell title="朋友权限" :isLink="true" arrow-direction="right"></u-cell>
		</view>
		<view class="community">
			<u-cell title="推荐给朋友" :isLink="true" arrow-direction="right"></u-cell>
			<u-cell class="account" arrow-direction="left">
				<view slot="title" class="u-slot-title">
					<text>设为星标好友</text>
				</view>
				<u-switch slot="right-icon" v-model="checked"></u-switch>
			</u-cell>
		</view>
		<view class="community">
			<u-cell class="account" arrow-direction="left">
				<view slot="title" class="u-slot-title">
					<text>加入黑名单</text>
				</view>
				<u-switch slot="right-icon" v-model="checked"></u-switch>
			</u-cell>
			<u-cell title="投诉" :isLink="true" arrow-direction="right"></u-cell>
		</view>
		<u-button class="delete" text="删除"></u-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				checked: false
			};
		}
	}
</script>

<style lang="less">
	.notes,
	.community {
		background-color: #ffffff;

	}

	::v-deep .notes .u-cell__body,
	::v-deep .community .u-cell__body {
		padding: 48rpx 28rpx 40rpx 42rpx;
		line-height: 50rpx;
		text-align: left;

		span {
			font-size: 36rpx;
			color: #2C2C2C;
		}
	}

	::v-deep .notes .u-cell:nth-child(1) .u-line,
	::v-deep .community .u-cell:nth-child(1) .u-line {
		border: none !important;
		border: 2rpx solid #D8D8D8 !important;
	}

	::v-deep .notes .u-cell:nth-child(2) .u-line,
	::v-deep .community .u-cell:nth-child(2) .u-line {
		border: none !important;
	}

	::v-deep .u-icon__icon--info {
		width: 30rpx;
		height: 30rpx;
		color: #B8B8B8;
		font-size: 36rpx;
	}

	.community {
		margin: 16rpx 0rpx;
	}

	::v-deep .notes .u-cell__value span {
		font-size: 36rpx;
		color: #B8B8B8;
		line-height: 50rpx;
	}

	::v-deep .account .u-cell__body .u-slot-title span {
		font-weight: 400;
		font-size: 36rpx !important;
		color: #2C2C2C !important;
	}

	::v-deep .u-switch {
		width: 84rpx !important;
		height: 52rpx !important;
		background-color: #D8D8D8;
		border-radius: 60rpx 60rpx 60rpx 60rpx;

		.u-switch__node {
			width: 40rpx !important;
			height: 40rpx !important;
		}
	}

	::v-deep .delete {
		// width: 750rpx;
		height: 138rpx;
		background-color: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		border: none;

		&:after {
			content: none;
		}

		span {
			font-size: 36rpx;
			color: #F8410E;
		}
	}
</style>